<template>
	<view class="pages" style="position: relative;">
		<!-- #ifndef H5 -->
		<view style="position: fixed;top: 0;left: 0;right: 0;z-index: 9999;" class="bg">
		<!-- #endif -->
			<!-- #ifdef H5 -->
			<view style="position: fixed;top:44px;left: 0;right: 0;z-index:9;" class="bg">
			<!-- #endif -->

				<view class="padding-bottom-sm">
					<u-tabs active-color="#FCD202" :list="qucanList" :is-scroll="false" :current="current"
						@change="change"></u-tabs>
				</view>

			</view>

			<!-- 全部订单 -->
			<view class="cont_one">
				<!-- 护工列表 -->
				<view class="list flex justify-center flex-wrap" style="margin-top: 120rpx;" v-if="orderList.length>0">
					<view class="list-box">
						<view class="list-box-item flex justify-between flex-wrap" @click="goInfo(item.userId)"
							v-for="(item,index) in orderList" :key="index">
							<view class="flex align-center" style="height: 100%;">
								<image
									:src="item.shiFuInfo && item.shiFuInfo.avatar?item.shiFuInfo.avatar:'../../static/logo.png'"
									mode=""></image>
								<view class="list-box-item-info">
									<view class="flex align-center">
										{{item.shiFuInfo.name}}
										<image v-if="item.iconImg"
											style="width: 30rpx;height: 30rpx;margin-left: 20rpx;border-radius: 0;"
											:src="item.iconImg" mode="widthFix"></image>
									</view>
									<view class="">
										{{item.shiFuInfo.sex==2?'女':'男'}} |
										<text style="margin: 0 10rpx 0 10rpx;"
											v-if="item.shiFuInfo && item.shiFuInfo.age">
											{{item.shiFuInfo.age}}岁
										</text>
										<text style="margin: 0 10rpx 0 10rpx;" v-else>
											暂无
										</text> |
										<text style="margin: 0 10rpx 0 10rpx;"
											v-if="item.shiFuInfo && item.shiFuInfo.province">
											{{item.shiFuInfo.province}}{{item.shiFuInfo.city}}
										</text>
										<text style="margin: 0 10rpx 0 10rpx;" v-else>
											暂无
										</text>
									</view>
									<!-- <view class="flex align-center" style="line-height: 30rpx;">
										<u-rate :count="count" v-model="value" active-color="#FFAA01"
											inactive-color="#FFAA01"
											style="margin-left: -5rpx;"></u-rate>{{item.finalScore}}
										<text style="margin-left: 20rpx;"
											v-if="item.orderCount+''">接单量:{{item.orderCount}}单</text>
										<text style="margin-left: 20rpx;" v-else>接单量:0单</text>
									</view> -->

								</view>
							</view>
							<view class="list-box-item-status flex justify-center align-center" v-if="item.status == 0">
								待同意
							</view>
							<view class="list-box-item-status flex justify-center align-center"
								style="background-color: green;" v-if="item.status == 1">
								已同意
							</view>
							<view class="list-box-item-status flex justify-center align-center"
								style="background-color: red;" v-if="item.status == 2">
								已拒绝
							</view>
							<view class="list-box-item-fw" v-if="item.shiFuInfo">
								服务项目：{{item.shiFuInfo.serviceName}}
							</view>
							<view class="list-box-item-fw" v-if="item.shiFuInfo">
								自我介绍：{{item.shiFuInfo.details}}
							</view>
							<view class="list-box-item-fw" v-if="item.status == 2">
								拒绝原因：{{item.reason}}
							</view>
							<view class="list-box-item-xz flex align-center" style="justify-content: space-between;"
								v-if="item.status == 0">
								<view class="list-box-item-xz-sub colors" @click.stop="noBack(item)">
									拒绝
								</view>
								<view class="list-box-item-xz-sub" @click.stop="goBack(item)">
									接受
								</view>
							</view>
						</view>
					</view>

					<!-- <u-loadmore v-if="people.length>5" :status="status" :icon-type="iconType" :load-text="loadText" /> -->
				</view>


				<empty v-if="!orderList.length" style="z-index:0;position: relative;top: -20px;"></empty>
			</view>




			<u-popup v-model="showAvatar" border-radius="14" width="600" :closeable="true" mode="center">
				<view class="showAvatar-title">
					填写信息
				</view>

				<view>
					<view class="showAvatar-line">
						拒绝原因
					</view>
					<u-input placeholder="请输入拒绝原因" style="background-color: #F5F5F5;padding: 0 20rpx;"
						v-model="myDetails" type="textarea" :border="true" :height="100" :auto-height="false" />
				</view>

				<view class="showAvatar-submit">
					<view @click="noGetJie()" class="showAvatar-submit-box flex justify-center align-center">
						确认
					</view>
				</view>
				<view class="showAvatar-bottom"></view>
			</u-popup>

		</view>



	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				orderList: [],
				orderLists: [],
				current: 0,
				myDetails: "",
				showAvatar: false,
				qucanList: [{
						name: '我的申请'
					},
					{
						name: '向我申请'
					}
				],
				form: {},
				query: {
					page: 1,
					limit: 10,
					shopId: uni.getStorageSync("shopId"),
					type: ''
				}
			};
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中...'
			})
			this.getList()

			// this.change(0)
		},
		onShow() {
			this.shopId = uni.getStorageSync('shopId');

		},
		methods: {

			change(index) {
				this.current = index
				this.getList()
			},
			getList() {
				if (this.current == 0) {
					this.query.type = 1
				} else if (this.current == 1) {
					this.query.type = 2
				}
				this.$Request.get("/admin/userShopBind/getShiFuBindInfo", this.query).then(res => {
					if (res.code == 0) {
						this.orderList = res.data.list
					}
					uni.hideLoading()
				});
			},
			goBack(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定接受该师傅的绑定申请吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.getJie(e)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},


			noBack(e) {
				this.showAvatar = true
				this.form = e
			},


			// 接受绑定
			getJie(e) {
				let that = this

				let data = {
					status: 1,
					id: e.id,
					userId: e.userId,
					shopId: e.shopId,
					type: 2,
					serviceIds: '',
					reason: '',
				}
				that.$Request.postJson('/admin/userShopBind/confirmBind', data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '已同意',
							icon: 'success',
							duration: 3000
						})

					} else {
						uni.showToast({
							title: '同意失败',
							icon: 'warn',
							duration: 3000
						})
					}
					this.getList()
				})

			},



			//拒绝
			noGetJie() {
				let that = this

				let data = {
					status: 2,
					id: that.form.id,
					userId: that.form.userId,
					shopId: that.form.shopId,
					type: 2,
					serviceIds: '',
					reason: that.myDetails,
				}
				that.$Request.postJson('/admin/userShopBind/confirmBind', data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '已拒绝',
							icon: 'success',
							duration: 3000
						})

					} else {
						uni.showToast({
							title: '拒绝失败',
							icon: 'warn',
							duration: 3000
						})
					}
					that.showAvatar = false
					that.getList()
				})
			},
		}

	}
</script>

<style scoped lang="scss">
	.bg {
		background-color: #FFFFFF;
	}

	.list {
		width: 100%;
		height: auto;
		z-index: 1;

		.list-box {
			width: 686rpx;
			height: auto;

			.list-box-item {
				width: 100%;
				// height: 200rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				padding: 20rpx 0;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
					margin-left: 20rpx;
					z-index: 1;
				}

				.list-box-item-info {
					margin-left: 20rpx;

					view:nth-of-type(1) {
						color: #1E1F31;
						font-size: 32rpx;
						font-weight: bold;
					}

					view:nth-of-type(2) {
						color: #333333;
						font-size: 26rpx;
						font-weight: 500;
						margin-top: 20rpx;
					}

					view:nth-of-type(3) {
						color: #333333;
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 20rpx;
					}
				}

				.list-box-item-status {
					width: 85rpx;
					height: 36rpx;
					background: #468EF8;
					border-radius: 18rpx 0px 0px 18rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					font-weight: 500;
					margin-top: 36rpx;
				}

				.list-box-item-fw {
					padding-left: 200rpx;
					margin-top: 20rpx;
					padding-right: 20rpx;
				}

				.list-box-item-xz {
					width: 100%;
					padding: 0 40rpx;
					margin-top: 20rpx;

					.list-box-item-xz-sub {
						padding: 10rpx 30rpx;
						background-color: #468EF8;
						color: #ffffff;
						border-radius: 10rpx;
					}

					.colors {
						background-color: red;
					}
				}
			}
		}
	}



	.showAvatar-title {
		padding-top: 30rpx;
		// margin-top: 30rpx;
		width: 100%;
		text-align: center;
		font-weight: bold;
	}

	.showAvatar-line {
		// padding-left: 40rpx;
		margin-left: 40rpx;
		margin-top: 30rpx;
		padding-left: 10rpx;
		border-left: 3px solid #557EFD;
		font-weight: bold;
	}

	.showAvatar-list {
		width: 100%;
		// padding: 20rpx 40rpx 0 40rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		margin-top: 20rpx;
	}

	.showAvatar-txt {
		padding-left: 40rpx;
		padding-right: 40rpx;
		margin-top: 20rpx;
	}

	.showAvatar-submit {
		margin-top: 30rpx;
		width: 100%;
		height: 80rpx;
		// margin-bottom: 30rpx;
		padding: 0 40rpx;

		.showAvatar-submit-box {
			width: 100%;
			height: 100%;
			background-color: #557EFD;
			border-radius: 14rpx;
			color: #ffffff;
		}
	}

	.showAvatar-bottom {
		width: 100%;
		height: 30rpx;
	}

	.showAvatar {
		width: 100%;
		// height: 100%;
		margin-top: 20rpx;
		align-content: flex-start;

		.showAvatar-uploud {
			width: 500rpx;
			height: 300rpx;
			// background-color: red;
			border: 1px dashed #8f8f94;
			border-radius: 14rpx;

			.showAvatar-uploud-txt {
				color: #8f8f94;
				margin-top: 20rpx;
			}
		}

		.showAvatar-submit {
			width: 500rpx;
			height: 80rpx;
			background-color: #557EFD;
			border-radius: 14rpx;
			color: #ffffff;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
		}
	}
</style>